<template>
  <div style="min-height: calc(100vh - 69px);margin-top: 69px;">
    <div class="app-container" style="width: 98%">

      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="12">
          <bar-chart />
        </el-col>

      </el-row>
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="12">
          <pie-chart />
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <LineTrend
            :trend-data="data1"
          />
        </el-col>
      </el-row>

      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="12">
          <div
            v-loading="loadingData.source.load"
            class="chart-wrapper"
            element-loading-text="拼命加载中"
            style="height: 480px;"
            @click="dialogOpen('source')"
          >
            <line-chart
              v-if="loadingData.source.flag && loadingData.source.getData.type ==='success'"
              :trend-data="chartsData.sourceData"
            />
            <span
              v-if="loadingData.source.getData.type ==='error'"
              class="pieError"
            >{{ loadingData.source.getData.message }}</span>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div
            v-loading="loadingData.status.load"
            class="chart-wrapper"
            element-loading-text="拼命加载中"
            style="height: 480px;"
            @click="dialogOpen('status')"
          >
            <ring-chart
              v-if="loadingData.status.flag && loadingData.status.getData.type==='success'"
              :ring-data="chartsData.statusData"
            />
            <span
              v-if="loadingData.status.getData.type==='error'"
              class="pieError"
            >{{ loadingData.status.getData.message }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="12">
          <div
            v-loading="loadingData.location.load"
            class="chart-wrapper"
            element-loading-text="拼命加载中"
            style="height: 480px;"
            @click="dialogOpen('location')"
          >
            <stack-chart
              v-if="loadingData.location.flag && loadingData.location.getData.type=='success'"
              :stack-data="chartsData.locationData"
            />
            <span
              v-if="loadingData.location.getData.type=='error'"
              class="pieError"
            >{{ loadingData.location.getData.message }}</span>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div
            v-loading="loadingData.typeScatter.load"
            class="chart-wrapper"
            element-loading-text="拼命加载中"
            style="height: 480px;"
            @click="dialogOpen('typeScatter')"
          >
            <line-stack
              v-if="loadingData.typeScatter.flag && loadingData.typeScatter.getData.type=='success'"
              :line-data="chartsData.typeScatterData"
            />
            <span
              v-if="loadingData.typeScatter.getData.type=='error'"
              class="pieError"
            >{{ loadingData.typeScatter.getData.message }}</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div v-if="isShow">
      <baidu-map
        class="map"
        :center="center"
        :zoom="zoom"
        style="height: 1px;"
        @ready="handler"
        @click="getClickInfo"
      />
    </div>
    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.show"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
      :before-close="handleClose"
      custom-class="centerDialog"
      top="8vh"
      width="60%"
    >
      <div v-if="dialog.option ==='source'">
        <line-chart
          v-if="loadingData.source.flag && loadingData.source.getData.type ==='success'"
          :height="height"
          :show-title="showTitle"
          :trend-data="chartsData.sourceData"
        />
      </div>
      <div v-if="dialog.option ==='status'">
        <ring-chart
          v-if="loadingData.status.flag && loadingData.status.getData.type==='success'"
          :height="height"
          :show-title="showTitle"
          :ring-data="chartsData.statusData"
        />
      </div>
      <div v-if="dialog.option ==='typeScatter'">
        <line-stack
          v-if="loadingData.typeScatter.flag && loadingData.typeScatter.getData.type=='success'"
          :height="height"
          :show-title="showTitle"
          :line-data="chartsData.typeScatterData"
        />
      </div>
      <div v-if="dialog.option ==='location'">
        <stack-chart
          v-if="loadingData.location.flag && loadingData.location.getData.type=='success'"
          :height="height"
          :show-title="showTitle"
          :stack-data="chartsData.locationData"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
/* import { getAllDevsData } from '@/api/charts'*/
import LineChart from '@/views/charts/LineChart'
import ringChart from '@/views/charts/ringChart'
import stackChart from '@/views/charts/stackChart'
import LineStack from '@/views/charts/LineStack'
import PieChart from '@/views/charts/PieChart'
import LineTrend from '@/views/charts/LineTrend'
import BarChart from '@/views/charts/BarChart'
export default {
  components: {
    PieChart,
    LineChart,
    ringChart,
    stackChart,
    LineStack,
    LineTrend,
    BarChart
  },
  data() {
    return {
      isShow: false,
      center: { lng: 106.1172310000, lat: 30.8432970000 },
      zoom: 11,
      BMap: null,
      loadingData: {
        source: {
          // 是否加载中
          load: true,
          // 是否显示图表 解决父组件传值问题
          flag: false,
          // 接口成功、失败
          getData: { type: 'error', message: '' }
        },
        status: {
          // 是否加载中
          load: true,
          // 是否显示图表 解决父组件传值问题
          flag: false,
          // 接口成功、失败
          getData: { type: 'error', message: '' }
        },
        typeScatter: {
          // 是否加载中
          load: true,
          // 是否显示图表 解决父组件传值问题
          flag: false,
          // 接口成功、失败
          getData: { type: 'error', message: '' }
        },
        location: {
          // 是否加载中
          load: true,
          // 是否显示图表 解决父组件传值问题
          flag: false,
          // 接口成功、失败
          getData: { type: 'error', message: '' }
        }
      },
      dataAll: { data1: {}, data2: {}},
      chartsData: {
        sourceData: {},
        statusData: {},
        typeScatterData: {},
        locationData: {}
      },
      dialog: {
        title: '',
        show: false,
        option: ''
      },
      height: '680px',
      showTitle: false,
      data1: {}
    }
  },
  mounted() {
    this.data1 = {
      title: '四川省各行业碳排放量走势',
      data: [
        {
          title: '排放量',
          data: [12, 23, 42, 12, 43, 231, 42]
        },
        {
          title: '中和量',
          data: [32, 123, 62, 82, 203, 34, 34]
        }
      ]
    }
    // this.initCharts()
    this.$nextTick(() => {
      this.isShow = true
      // this.baiduMap()
      this.initDevCount()
      // 获取上访途径
      this.getBizSourceData()
      // 获取坐席状态
      this.getSetStatusData()
      // 获取上访分类分布
      this.getTypeScatterData()

      setTimeout(() => {
        // 分布图
        this.getLocationData()
      }, 1000)
    })
  },
  methods: {
    handler({ BMap, map }) {
      this.BMap = BMap
      this.map = map
      var point = new BMap.Point(106.1172310000, 30.8432970000)
      map.centerAndZoom(point, 11)
      var marker = new BMap.Marker(point) // 创建标注
      map.addOverlay(marker) // 将标注添加到地图中
      var circle = new BMap.Circle(point, 6, {
        strokeColor: 'Red',
        strokeWeight: 6,
        strokeOpacity: 1,
        Color: 'Red',
        fillColor: '#f03'
      })
      map.addOverlay(circle)
    },
    getClickInfo(e) {
      console.log(e.point.lng)
      console.log(e.point.lat)
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
    },
    handleClose() {
      this.dialog.show = false
      this.showTitle = false
    },
    dialogOpen(type) {
      this.$message({
        message: '打开页面',
        type: 'info',
        duration: 100
      })
      console.log(type)
      this.dialog.option = type
      if (this.loadingData[type].flag) {
        this.dialog.show = true
        this.showTitle = true
      } else {
        this.$message({
          message: '数据出错啦',
          type: 'info'
        })
      }
    },
    getLocationData() {
      this.loadingData.location = {
        load: true,
        flag: false,
        getData: {
          type: 'error', message: ''
        }
      }
      const response = {
        'errorCode': 'S0000',
        'errorMsg': '成功',
        'data': [{ 'geoPointID': 709, 'getLT': '106.589238,31.077935', 'stationTitles': ['南充市营山县人民检察院'], 'count': 8 }],
        'timestamp': '2021-07-07 14:56:56'
      }
      setTimeout(() => {
        this.initLocationCount(response.data)
      }, 3000)
      /* return new Promise((resolve, reject) => {
          getLocationScatter().then(response => {
            if (response.errorMsg === '成功') {
              /!* this.chartsData.sourceData = response.data*!/
              this.initLocationCount(response.data)
            } else {
              this.loadingData.location = {
                load: false,
                flag: false,
                getData: {
                  type: 'error', message: '数据异常'
                }
              }
            }
            resolve()
          }).catch(error => {
            this.loadingData.location = {
              load: false,
              flag: false,
              getData: {
                type: 'error', message: '数据异常'
              }
            }
            reject(error)
          })
        })*/
    },
    async getSetStatusData() {
      this.loadingData.status = {
        load: true,
        flag: false,
        getData: {
          type: 'error', message: ''
        }
      }
      let obj1 = []
      let obj2 = []
      // 获取坐席状态
      try {
        // await getSetStatus()
        const res1 = {
          'errorCode': 'S0000',
          'errorMsg': '成功',
          'data': [{ 'name': '线上', 'value': 2, 'selected': false }],
          'timestamp': '2021-07-07 14:18:57'
        }
        if (res1 && res1.data) {
          obj1 = res1.data
        }
      } catch (e) {
        console.log('获取坐席状态异常')
      }
      // 获取关注对象
      try {
        // await getAttentionsum()
        const res2 = {
          'errorCode': 'S0000',
          'errorMsg': '成功',
          'data': [{ 'name': '其他', 'value': 1 }],
          'timestamp': '2021-07-07 14:18:57'
        }
        if (res2 && res2.data) {
          obj2 = res2.data
        }
      } catch (e) {
        console.log('获取关注对象异常')
      }

      if (!obj2.length && !obj1.length) {
        this.loadingData.status = {
          load: false,
          flag: false,
          getData: {
            type: 'error', message: '数据异常'
          }
        }
      } else {
        setTimeout(() => {
          this.initStatusCount(obj1, obj2)
        }, 3000)
      }
    },
    getTypeScatterData() {
      this.loadingData.typeScatter = {
        load: true,
        flag: false,
        getData: {
          type: 'error', message: ''
        }
      }
      const response = {
        'errorCode': 'S0000',
        'errorMsg': '成功',
        'data': {
          'month': [202002, 202003, 202004, 202005, 202006, 202007, 202008, 202009, 202010, 202011, 202012, 202101, 202102, 202103, 202104, 202105, 202106, 202107],
          'dataValue': [{
            'title': '司法救助',
            'monthValue': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }, {
            'title': '民事申述',
            'monthValue': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }, {
            'title': '刑事申诉',
            'monthValue': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }, { 'title': '行政申诉', 'monthValue': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] }, {
            'title': '其他',
            'monthValue': [2, 1, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }, { 'title': '举报', 'monthValue': [0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0] }, {
            'title': '控告',
            'monthValue': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }]
        },
        'timestamp': '2021-07-07 15:00:24'
      }
      setTimeout(() => {
        this.initTypeCount(response.data)
      }, 3000)
    },
    getBizSourceData() {
      this.loadingData.source = {
        load: true,
        flag: false,
        getData: {
          type: 'error', message: ''
        }
      }
      const response = {
        'errorCode': 'S0000',
        'errorMsg': '成功',
        'data': {
          'month': [202002, 202003, 202004, 202005, 202006, 202007, 202008, 202009, 202010, 202011, 202012, 202101, 202102, 202103, 202104, 202105, 202106, 202107],
          'dataValue': [
            {
              'title': '语文',
              'monthValue': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },
            { 'title': '数学', 'monthValue': [2, 1, 3, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0] },
            {
              'title': '逻辑思维',
              'monthValue': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },
            { 'title': '英语', 'monthValue': [0, 15, 3, 0, 0, 6, 7, 21, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0] },
            {
              'title': '历史',
              'monthValue': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },
            { 'title': '化学', 'monthValue': [2, 1, 3, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0] },
            {
              'title': '其他',
              'monthValue': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },
            {
              'title': '物理',
              'monthValue': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },
            { 'title': '生物', 'monthValue': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
            {
              'title': '健康',
              'monthValue': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            }]
        },
        'timestamp': '2021-07-07 14:18:57'
      }
      setTimeout(() => {
        this.initSourceCount(response.data)
      }, 3000)
    },
    initLocationCount(data) {
      const obj = {
        title: '地理分布',
        map: {},
        data: []
      }
      if (data && data.length) {
        data.forEach(item => {
          const name = item.stationTitles.join(',')
          obj.map[name] = item.getLT.split(',')
          obj.data.push({
            name,
            value: item.count
          })
        })
      }
      this.chartsData.locationData = obj
      this.loadingData.location = {
        load: false,
        flag: true,
        getData: {
          type: 'success', message: ''
        }
      }
    },
    initTypeCount(data) {
      this.chartsData.typeScatterData = {
        title: '分类分布图',
        name: [],
        legend: [],
        series: []
      }
      const obj = {
        title: '分类分布图',
        name: [],
        legend: [],
        series: []
      }
      if (data && data.month && data.month.length) {
        data.month.forEach(item => {
          const month = (item + '').substring(0, 4) + '-' + (item + '').substring(4, 6)
          obj.name.push(month)
        })
      }
      if (data && data.dataValue && data.dataValue.length) {
        data.dataValue.forEach(item => {
          obj.legend.push(item.title)
          obj.series.push({
            name: item.title,
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: item.monthValue
          })
        })
      }
      this.chartsData.typeScatterData = obj
      this.loadingData.typeScatter = {
        load: false,
        flag: true,
        getData: {
          type: 'success', message: ''
        }
      }
    },
    initStatusCount(data1, data2) {
      const obj = {
        title: '上访统计',
        name: [],
        dataStatus: [],
        dataAtten: []
      }
      if (data1 && data1.length > 0) {
        obj.dataStatus = data1
        data1.forEach(item => {
          obj.name.push(item.name)
        })
      }
      if (data2 && data2.length) {
        obj.dataAtten = data2
        data2.forEach(item => {
          obj.name.push(item.name)
        })
      }
      this.chartsData.statusData = obj
      this.loadingData.status = {
        load: false,
        flag: true,
        getData: {
          type: 'success', message: ''
        }
      }
    },
    initSourceCount(data) {
      const obj = {
        title: '上访途径',
        series: [],
        data: []
      }
      if (data && data.month && data.month.length > 0) {
        const monthArr = ['month']
        data.month.forEach(item => {
          const month = (item + '').substring(0, 4) + '-' + (item + '').substring(4, 6)
          monthArr.push(month)
        })
        obj.data.push(monthArr)
      }
      if (data && data.dataValue && data.dataValue.length > 0) {
        data.dataValue.forEach(item => {
          let valueArr = []
          valueArr.push(item.title)
          valueArr = valueArr.concat(item.monthValue)
          obj.data.push(valueArr)
          obj.series.push({
            type: 'line', smooth: true, seriesLayoutBy: 'row'
          })
        })
      }
      obj.series.push({
        type: 'pie',
        id: 'pie',
        radius: '30%',
        center: ['50%', '25%'],
        label: {
          formatter: '{b}:{@' + obj.data[0][1] + '} ({d}%)'
        },
        encode: {
          itemName: 'month',
          value: obj.data[0][1],
          tooltip: obj.data[0][1]
        }
      })
      this.chartsData.sourceData = obj
      this.loadingData.source = {
        load: false,
        flag: true,
        getData: {
          type: 'success', message: ''
        }
      }
    },
    // 处理数据
    initDevCount() {
      this.dataAll.data1 = { title: '1212' }
    }
  }
}
</script>

<style scoped>
  .line {
    text-align: center;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }

  .pieError {
    display: block;
    height: 460px;
    line-height: 460px;
    width: 100%;
    text-align: center;
    color: #909399;
  }
</style>

